import { getCuesSubmitPage } from '@/services/api/api-cues-submit';
import { findTagColor } from '@/utils/findTagColor';
import { FileImageOutlined, PaperClipOutlined } from '@ant-design/icons';
import { ProCard, ProTable } from '@ant-design/pro-components';
import { ActionType } from '@ant-design/pro-table';
import { Avatar, Space, Spin, Tag } from 'antd';
import moment from 'moment';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
import AddSubmit from '../../submit/components/AddSubmit';
import DetailsSubmit from '../../submit/components/DetailsSubmit';
interface TableTopicSubmitProps {
  mode: number;
  item: CuesTopicData.TopicPage;
  onRefurbish: () => void;
}

const TableTopicSubmit: React.FC<TableTopicSubmitProps> = (props) => {
  const { mode, item, onRefurbish } = props;
  const access = useAccess();
  const ref = useRef<ActionType>();
  useEffect(() => {
    console.log('2222222222222222222111');
  }, [])
  return (
    <>
      <ProTable<CuesSubmitData.SubmitPage>
        columns={[
          {
            title: '报送线索',
            dataIndex: 'articleName',
            // copyable: true,
            ellipsis: true,
            width: '180px',
            align: 'center',
            key: 'articleName',
            render: (dom, record, _index, action) => {
              return (
                <div
                  style={{
                    textAlign: 'left',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                  }}
                >
                  {record.isImage === 1 ? <FileImageOutlined /> : <></>}
                  {record.isFile === 1 ? <PaperClipOutlined /> : <></>}
                  <DetailsSubmit
                    id={record.id}
                    name={record.articleName}
                    onRefurbish={() => {
                      action?.reload();
                    }}
                  />
                </div>
              );
            },
          },
          {
            title: '选题方向',
            dataIndex: 'articleIndustryName',
            key: 'articleIndustryName',
            width: '140px',
            align: 'center',
            search: false,
            render: (_, row) => {
              let industrys = row?.articleIndustrys;

              if (industrys.length > 2) {
                industrys = industrys.slice(0, 2);
                industrys.push({
                  label: '...',
                  value: '...',
                });
              }

              return (
                <Space size={[0, 8]} wrap>
                  {industrys?.map((item) => (
                    <Tag key={item.value}>{item.label}</Tag>
                  ))}
                </Space>
              );
            },
          },
          {
            title: '单位',
            key: 'articleOrganizationTopName',
            dataIndex: 'articleOrganizationTopName',
            width: '180px',
            search: false,
            align: 'center',
            render: (_, row) => (
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Tag color={findTagColor(row.articleOrganizationTopName)}>
                  {row.articleOrganizationTopName}
                </Tag>
                <Avatar size="small" src={row.articleOrganizationAvatar} />
                {row.articleOrganizationName}
              </div>
            ),
          },
          {
            title: '新闻联络人',
            dataIndex: 'articleAccountName',
            ellipsis: true,
            search: false,
            width: '70px',
            align: 'center',
            key: 'articleAccountName',
          },
          {
            title: '报送日期',
            dataIndex: 'createdTimes',
            key: 'createdTimes',
            valueType: 'dateRange',
            hideInTable: true,
            fieldProps: {
              allowClear: true,
              placeholder: ['开始日期', '结束日期'],
              format: 'YYYY-MM-DD',
              ranges: {
                今日: [moment(), moment()],
                本月: [moment().startOf('month'), moment().endOf('month')],
                上月: [
                  moment().startOf('month').subtract(1, 'months'),
                  moment().endOf('month').subtract(1, 'months'),
                ],
                最近7天: [moment().subtract(6, 'days'), moment()],
                最近60天: [moment().subtract(59, 'days'), moment()],
                最近90天: [moment().subtract(89, 'days'), moment()],
              },
            },
          },
          {
            title: '创建时间',
            dataIndex: 'createdTime',
            key: 'createdTime',
            width: '120px',
            align: 'center',
            search: false,
          },

        ]}
        request={async (params = {}) => {
          const response = await getCuesSubmitPage({
            ...params,
            mode,
            topicId: item.id,
          });

          return Promise.resolve({
            data: response.data.data,
            total: response.data.total,
            success: response.code === 0,
          });
        }}
        actionRef={ref}
        ghost
        rowKey="id"
        dateFormatter="string"
        bordered
        search={false}
        cardProps={{
          style: {
            padding: 0,
          },
        }}
        toolbar={{
          style: {
            marginTop: -16,
          },
        }}
        toolBarRender={(action) => [
          access.线索征集x报送线索x页面 && item.run === 1 && (
            <AddSubmit
              key="add_submit"
              topicId={item.id}
              topicName={item.name}
              eventNum={item.eventNum ? item.eventNum : ''}
              onRefurbish={() => {
                action?.reload();
              }}
            />
          ),
        ]}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 20,
        }}
      />
    </>
  );
};

export default TableTopicSubmit;
